<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->
<div>

    <div class="clear">
      <div class="formLabel-labelCell tableContainer-labelCell">Group name*:</div>
      <div class="formLabel-controlCell tableContainer-valueCell">
          <input type="text" id="addVirtualHostNode.groupName"
                          data-dojo-type="dijit/form/ValidationTextBox"
                          data-dojo-props="
                              name: 'groupName',
                              placeHolder: 'group name',
                              required: true,
                              title: 'Enter name to identify the new group',
                              promptMessage: 'Name to identify the new group.'"/>
      </div>
    </div>
    <div class="clear">
      <div class="formLabel-labelCell tableContainer-labelCell">Address*:</div>
      <div class="formLabel-controlCell tableContainer-valueCell">
          <input type="text" id="addVirtualHostNode.address"
                          data-dojo-type="dijit/form/ValidationTextBox"
                          data-dojo-props="
                              name: 'address',
                              placeHolder: 'host:port',
                              required: true,
                              title: 'Enter node hostname and port number that new node will use',
                              promptMessage: 'Node hostname and port number that new node will use.<br/>Other nodes will use connect to this address to replicate messages'" />
      </div>
    </div>
    <div class="clear">
      <div class="formLabel-labelCell tableContainer-labelCell">Store path:</div>
      <div class="formLabel-controlCell tableContainer-valueCell">
          <input type="text" id="addVirtualHostNode.storePath"
                          data-dojo-type="dijit/form/ValidationTextBox"
                          data-dojo-props="
                              name: 'storePath',
                              placeHolder: 'path/to/store',
                              title: 'Enter file system location for the store',
                              promptMessage: 'File system location for the store'" />
      </div>
    </div>
    <div class="clear formBox">
        <fieldset>
            <legend>Permitted group nodes</legend>
            <div class="clear">
                <div class="formLabel-labelCell tableContainer-labelCell">Permitted addresses*:</div>
                <div class="formLabel-controlCell tableContainer-valueCell addPermittedNodeList">
                    <select type="text" id="addVirtualHostNode.permittedNodesList"
                           data-dojo-type="dijit/form/MultiSelect"
                           data-dojo-props="
                                      name: 'permittedNodesList',
                                      readOnly : 'true',
                                      title: 'Enter list of the other node address that will form the group'">
                    </select> <!-- must use closing tag rather than shorthand - dojo bug? -->
                </div>
                <div id="addVirtualHostNode.permittedNodesList.tooltip"
                     data-dojo-type="dijit/Tooltip"
                     data-dojo-props="connectId: 'addVirtualHostNode.permittedNodesList',
                                          label: 'Only node addresses appearing in the list will be permitted to join the group.'">
                </div>
                <button data-dojo-type="dijit/form/Button" id="addVirtualHostNode.permittedNodeRemove" data-dojo-props="label: '-'" ></button>
            </div>

            <div class="clear"></div>
            <div class="clear">
                <div class="formLabel-labelCell tableContainer-labelCell">Address:</div>
                <div class="formLabel-controlCell tableContainer-valueCell">
                    <input type="text" id="addVirtualHostNode.permittedNode"
                           data-dojo-type="dijit/form/ValidationTextBox"
                           data-dojo-props="
                                      name: 'permittedNode',
                                      placeHolder: 'host:port',
                                      intermediateChanges: true,
                                      title: 'Enter address of node to be permitted into the group',
                                      promptMessage: 'Address of node to be permitted into the group'" />
                </div>
                <button data-dojo-type="dijit/form/Button" id="addVirtualHostNode.permittedNodeAdd" data-dojo-props="label: '+'"></button>
            </div>
        </fieldset>
    </div>

    <input type="hidden" id="addVirtualHostNode.permittedNodes"
           data-dojo-type="dijit/form/ValidationTextBox"
           data-dojo-props="name: 'permittedNodes'"
           />

    <input type="hidden" id="addVirtualHostNode.helperAddress"
           data-dojo-type="dijit/form/ValidationTextBox"
           data-dojo-props="name: 'helperAddress'" />

    <div class="clear"></div>
</div>
